<template>
	<view class="indexContainer">
	<view class="header">
		<image class="logo" src="../../static/images/logo.png" mode="widthFix"></image>
		<view class="serach">
			<view class="iconfont icon-sousuo"></view>
			<input class="searchInput"  placeholder="搜索商品" placeholder-class="tips"/>
		</view>
		<button class="btn">七月</button>
	</view>
	<scroll-view class="navScroll" enable-flex="true" scroll-x="true"  v-if="kingKongList">
		<view class="navItem" :class="currentIndex === -1 ? 'active':''" @click="changeCurrentIndex(-1)" >
			推荐
		</view>
		<view class="navItem" :class="{ active:currentIndex===index }"
		  v-for="(item,index) in kingKongList" 
		  			:key="item.L1Id"
					@click="changeCurrentIndex(index)" >
			{{item.text}}
		</view>
		
	</scroll-view>
	<scroll-view class="contentScroll"  scroll-y="true"> 
		<Recommend v-if="currentIndex===-1" :indexData = indexData></Recommend>
		<CateList v-else  ></CateList>
	</scroll-view>
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import Recommend from '@/components/Recommend/Recommend.vue'
	import CateList from '@/components/CateList/CateList.vue'
	export default {
		data() {
			return {
				currentIndex:-1
			}
		},
		async created(){
			this.getIndexData()
		},
		methods : {
			changeCurrentIndex(index){
				this.currentIndex = index
			},
			
			...mapActions('home',['getIndexData'])
		},
		computed:{
			...mapState('home',['indexData']),
			kingKongList(){
				return this.indexData.kingKongModule?.kingKongList || []
			}
		},
		components:{
			Recommend,
			CateList
		}
	}
</script>

<style lang="stylus">
.indexContainer 
	.header 
		display   flex  
		margin-top   20upx  
		align-content   center  
		.logo 
			height  auto
			margin 0 20upx
			width   118upx  
		.serach 
			position   relative  
			height   60upx  
			background-color   #ccc  
			flex-grow   1  
			padding-left  60upx  
			border-radius   10upx  
			.iconfont
				position  absolute  
				top 50%  
				transform   translateY(-50%)  
				padding-left   5upx  
			.searchInput 
				height   100%  
				.tips 
					text-align   center  
					font-style   24upx  
					text-indent   -40upx
		.btn 
			width  140upx  
			height  60upx    
			border-radius  10upx  
			font-size  24upx  
			text-align  center   
			color  red  
			line-height  60upx  
			margin  0 20upx  
	.navScroll
		white-space nowrap
		overflow-x hidden
		.navItem
			display inline-block
			height 80upx
			line-height 80upx
			width 140upx
			font-size 28upx
			text-align center
			&.active
				border-bottom 4upx solid red
		
			
</style>

		